<!--  线 + 柱混合图 -->
<template>
  <div class="w-full bg-white" style="padding: 0">
    <div :id="id" :style="{ height }" :class="className" />
  </div>
</template>

<script setup lang="ts">
import { dayAndCountType } from "@/api/stats/type";
import * as echarts from "echarts";

const props = defineProps({
  id: {
    type: String,
    default: "barChart",
  },
  className: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "320px",
  },
  uvData: {
    type: Array<dayAndCountType>,
    default: [],
    required: true,
  },
  pvData: {
    type: Array<dayAndCountType>,
    default: [],
    required: true,
  },
});

const getCategory = computed(() => {
  let needData: string[] = [];
  props.pvData.forEach((item) => {
    needData.push(item.day);
  });
  return needData;
});

const getPvData = computed(() => {
  let needData: number[] = [];
  props.pvData.forEach((item) => {
    needData.push(item.count);
  });
  return needData;
});

const getUvData = computed(() => {
  let needData: number[] = [];
  props.uvData.forEach((item) => {
    needData.push(item.count);
  });
  return needData;
});

const options = {
  grid: {
    left: "2%",
    right: "2%",
    bottom: "4%",
    containLabel: true,
  },
  tooltip: {
    // 提示框组件。// trigger:'item' 默认的鼠标移动到色块上触发
    trigger: "axis", // 鼠标只要在轴上就会触发
  },
  //图例相关
  legend: {
    top: "4%",
    left: "center",
  },
  xAxis: {
    /*改变y轴颜色*/
    axisLine: {
      lineStyle: {
        color: "#0000FF",
        width: 1, //这里是为了突出显示加上的
      },
    },
    type: "category",
    boundaryGap: false,
    data: getCategory.value,
  },
  yAxis: {
    /*改变y轴颜色*/
    axisLine: {
      lineStyle: {
        color: "#0000FF",
        width: 1, //这里是为了突出显示加上的
      },
    },
    type: "value",
  },
  series: [
    {
      name: "访问量(pv)",
      data: getPvData.value,
      type: "line",
      smooth: true,
      itemStyle: {
        normal: {
          color: "#a80000", //改变折线点的颜色
          lineStyle: {
            color: "#a80000", //改变折线颜色
          },
        },
      },
    },
    {
      name: "独立用户(UV)",
      data: getUvData.value,
      type: "line",
      smooth: true,
      itemStyle: {
        normal: {
          color: "#8763f3", //改变折线点的颜色
          lineStyle: {
            color: "#8763f3", //改变折线颜色
          },
        },
      },
    },
  ],
};

onMounted(() => {
  // 图表初始化
  const chart = echarts.init(
    document.getElementById(props.id) as HTMLDivElement
  );
  chart.setOption(options);

  // 大小自适应
  window.addEventListener("resize", () => {
    chart.resize();
  });
});
</script>
